<template>
  <div class="min-h-screen p-8 bg-gray-50">
    <h1 class="text-3xl font-bold mb-4">关于页面</h1>
    <p class="mb-4">这是一个展示如何使用 Nuxt 3 API 路由的页面。</p>
    
    <div v-if="list.length" class="bg-white p-4 rounded shadow">
      <h2 class="text-xl font-semibold mb-2">API 响应:</h2>
      <pre>{{ JSON.stringify(list, null, 2) }}</pre>
    </div>
    

    
    <NuxtLink to="/" class="mt-4 inline-block text-blue-500 hover:underline">
      返回首页
    </NuxtLink>
  </div>
</template>

<script setup>
import {  onMounted, ref ,} from 'vue'
// import { useAsyncData } from '#imports'
import { useHead,useNuxtApp,useAsyncData,useFetch }  from 'nuxt/app';
//  const { axios } = useNuxtApp(); // 获取Axios 实例
//  const list =ref([])
 const getList =async () => {
   return await useFetch('/api/todos')
  //  list.value = data
  //  return data
 }
useHead({
  title: '关于页面',
  meta: [
    { name: 'description', content: '公司介绍页面' },
    { name: 'keywords', content: '公司, 团队, 使命' }
  ]
})
//  onMounted(() => {
//       getList();
//     });
// 使用 useAsyncData 获取异步数据
const { data: list, error, pending } = useAsyncData('todos', getList)
</script>